<template>
  <div class="container">
    <div class="target">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <h3>3D 转换</h3>
  </div>
</template>

<script>
</script>


<style scoped lang="scss">
.container > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 100px;
  height: 100px;
  ul {
    width: 100%;
    height: 100%;
    position: relative;
    // transform--style属性指定嵌套元素是怎样在三维空间中呈现。
    // 注意： 使用此属性必须先使用 transform 属性.
    
    // animation: name duration timing-function delay iteration-count direction fill-mode play-state;
    animation: doRotate 10s linear 0s infinite alternate none;
    transform: translateX(0px) rotateY(0deg) rotateX(0deg);
    transform-style: preserve-3d;

    /* Safari and Chrome */
    -webkit-animation: doRotate 10s linear 0s infinite alternate none;
    -webkit-transform: translateX(0px) rotateY(0deg) rotateX(0deg);; 
	  -webkit-transform-style: preserve-3d;
  }
  @keyframes doRotate {
    0% {
      transform: rotateX(10deg) rotateY(-10deg) rotateZ(10deg);
      -webkit-transform: rotateX(10deg) rotateY(-10deg) rotateZ(10deg);
    }
    10% {
      transform: rotateX(40deg) rotateY(10deg) rotateZ(30deg);
      -webkit-transform: rotateX(40deg) rotateY(10deg) rotateZ(30deg);
    }
    20% {
      transform: rotateX(80deg) rotateY(20deg) rotateZ(60deg);
      -webkit-transform: rotateX(80deg) rotateY(20deg) rotateZ(60deg);
    }
    30% {
      transform: rotateX(90deg) rotateY(50deg) rotateZ(80deg);
      -webkit-transform: rotateX(90deg) rotateY(50deg) rotateZ(80deg);
    }
    40% {
      transform: rotateX(120deg) rotateY(70deg) rotateZ(100deg);
      -webkit-transform: rotateX(120deg) rotateY(70deg) rotateZ(100deg);
    }
    50% {
      transform: rotateX(150deg) rotateY(100deg) rotateZ(130deg);
      -webkit-transform: rotateX(150deg) rotateY(100deg) rotateZ(130deg);
    }
    60% {
      transform: rotateX(170deg) rotateY(140deg) rotateZ(150deg);
      -webkit-transform: rotateX(170deg) rotateY(140deg) rotateZ(150deg);
    }
    70% {
      transform: rotateX(180deg) rotateY(160deg) rotateZ(160deg);
      -webkit-transform: rotateX(180deg) rotateY(160deg) rotateZ(160deg);
    }
    80% {
      transform: rotateX(200deg) rotateY(170deg) rotateZ(180deg);
      -webkit-transform: rotateX(200deg) rotateY(170deg) rotateZ(180deg);
    }
    90% {
      transform: rotateX(240deg) rotateY(180deg) rotateZ(200deg);
      -webkit-transform: rotateX(240deg) rotateY(180deg) rotateZ(200deg);
    }
    100% {
      transform: rotateX(280deg) rotateY(200deg) rotateZ(230deg);
      -webkit-transform: rotateX(280deg) rotateY(200deg) rotateZ(230deg);
    }
  }
  ul li {
    position: absolute;
    list-style: none;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 100px;
  }
  ul li:nth-child(1) {
    background-color: Gold;
    transform: translate(50px) rotateY(90deg);
  }
  ul li:nth-child(2) {
    background-color: PaleVioletRed;
    transform: translate(-50px) rotateY(90deg);
  }
  ul li:nth-child(3) {
    background-color: LimeGreen;
    transform: translateY(50px) rotateX(90deg);
  }
  ul li:nth-child(4) {
    background-color: MediumSlateBlue;
    transform: translateY(-50px) rotateX(90deg);
  }
  ul li:nth-child(5) {
    background-color: DarkOrchid;
    transform: translateZ(-50px);
  }
  ul li:nth-child(6) {
    background-color: aqua;
    transform: translateZ(50px);
  }
}
</style>
